<template>
	<div>
		<el-card class="!border-none mb-4" shadow="never">
			<el-alert type="warning" :title="tipsInfo" :closable="false" show-icon></el-alert>
		</el-card>
		<el-card class="!border-none" shadow="never" :body-style="{ padding: '10px 20px 20px 20px' }">
			<el-tabs v-model="activeTab" @tab-click="handleClick">
				<el-tab-pane v-for="item in tabsMap" :label="item.name" :name="item.type" :index="item.id" :key="item.id" lazy>
					<component :is="item.component" v-if="activeTab == item.type" />
				</el-tab-pane>
			</el-tabs>
		</el-card>
	</div>
</template>

<script lang="ts" setup name="messageTemplate">
import { ref, defineAsyncComponent, onMounted } from 'vue';

const activeTab = ref('user');

const tipsInfo = ref('');

const tabsMap = [
	{
		id: 0,
		type: 'user',
		name: '用户通知',
		component: defineAsyncComponent(() => import('/@/views/setting/message/component/template/userList.vue')),
		tips: '用户通知消息管理',
	},
	{
		id: 1,
		type: 'sys',
		name: '平台通知',
		component: defineAsyncComponent(() => import('/@/views/setting/message/component/template/sysList.vue')),
		tips: '平台通知消息管理',
	}
];

const handleClick = (tab: any, event: Event) => {
	activeTab.value = tab.props.name;
	setTips(tab.index)
};

const setTips = (id: any) => {
	tipsInfo.value = tabsMap[id].tips;
};

onMounted(() => {
	setTips(0);
});
</script>
